<template>
  <div class="con">
     <div class="header">
         
     </div>
     <div class="main">
         <router-view></router-view>
     </div>
      <footer>
          <ul>
              <li  @click="index()">
                  <a href="javascript:;">
                      <van-icon name="wap-home-o"/>
                      <span>首页</span>
                  </a>
              </li>
               <li  @click="sort()">
                  <a href="javascript:;">
                      <van-icon name="send-gift-o"/>
                      <span>分类</span>
                  </a>      
              </li>
               <li  @click="live()">
                  <a href="javascript:;">
                      <van-icon name="play-circle-o"/>
                      <span>直播秀</span>
                  </a>
              </li>
               <li @click="cart()">
                  <a href="javascript:;">
                      <van-icon name="shopping-cart-o"/>
                      <span>购物车</span>
                  </a>
              </li>
               <li  @click="mine()">
                  <a href="javascript:;">
                      <van-icon name="contact"/>
                      <span>我的</span>
                  </a>
              </li>
          </ul>
      </footer>
  </div>
</template>

<script>
export default {
    name:'Index',
    methods:{
        
    cart(){
        this.$router.push('/cart')
    },
    index(){
       this.$router.push('/index') 
    },
    live(){
       this.$router.push('/live') 
    },
    sort(){
       this.$router.push('/sort') 
    },
    mine(){
       this.$router.push('/mine') 
    },
    live(){
       this.$router.push('/live') 
    }
    }
}
</script>

<style scoped="">
*{
   
    margin: 0;
    padding: 0;
    
}

.con{
   display: flex;
   flex-direction: column;
   height: 100vh;
    background:#f3f3f3; 
}
.main{
    flex:1;
    overflow:auto;
}

footer{
    border-top:1px solid  #f3f3f3;
    height: 50px;
    padding: 0 12px;
    background: #fff
}
footer ul{
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center
}
footer ul a{
    display: flex;
    flex-direction: column;
    align-items: center
}
footer ul a .van-icon{
    font-size: 24px;
    color: #7f7f7f
}
footer ul a span{
    font-size: 12px;
    color: #7f7f7f
}
</style>